<script lang="ts" setup>
const { history, clearHistory } = $(useSearch())

</script>

<template>
  <view between my>
    <view center>
      <image w-32 h-32 src="/static/images/icons/search/time.svg" />
      <text ml-1 text="30 #333333">搜索历史</text>
    </view>
    <image class="w-32 h-32" src="/static/images/icons/search/trash_can.svg" @click="clearHistory" />
  </view>
  <view item-center gap-3 flex="~ warp">
    <navigator v-for="(item, index) in history" :key="index" :url="`/pages/search/index?content=${item}`"
      open-type="navigate" hover-class="navigator-hover">
      <view px-4 py-1 center rounded-full bg="#f2f2f2">
        <text text="22 #7f7f7f">{{ item }}</text>
      </view>
    </navigator>
  </view>
</template>

<style lang="less" scoped></style>